<template>
  <div>
    <div class="filter">
      <div class="filter-container">
        常用相册
      </div>
      <div>
        <el-button class="pointicon" type="success" @click="showSourceDialog = true">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconicon_btn_tjsh" />
          </svg>
          新增分类
        </el-button>
      </div>
    </div>
    <div class="content-card">
      <el-card v-for="source in sourceData" :key="source.id" :body-style="{ padding: '0px' }" shadow="hover">
        <img class="image" :src="source.image" />
        <div class="sourcebox">
            <p>{{source.typeName}}</p>
            <p>{{source.description}}</p>
        </div>
        <div class="sourcehandlerbox">
            <el-button  @click="delSource(source)" type="danger">删除分类</el-button>
            <el-button  @click="modifySource(source)" type="success">编辑分类</el-button>
        </div>
      </el-card>
    </div>
    
    <!-- 图片上传 -->
    <el-dialog
      width="849px"
      center
      :visible.sync="showSourceDialog"
      :show-close="false"
      :before-close="closeModal"
    >
      <upload ref="upimage" v-if="showSourceDialog" :imgChange="changeCall" />
      <div slot="footer" class="dialog-footer">
        <el-form label-width="100px">
          <el-form-item label="分类名字" prop="name">
            <el-input v-model="resourceType.typeName"></el-input>
          </el-form-item>
          <el-form-item label="分类描述" prop="name">
            <el-input type="textarea" v-model="resourceType.description"></el-input>
          </el-form-item>
          <el-form-item label="分类标签" prop="name">
            <el-input v-model="resourceType.tags"></el-input>
          </el-form-item>
          <el-form-item label="分类语言" prop="name">
            <el-input v-model="resourceType.language"></el-input>
          </el-form-item>
          <el-form-item label="分类排序" prop="name">
            <el-input type="number" v-model="resourceType.sort"></el-input>
          </el-form-item>
        </el-form>

        <el-button type="warning" @click="closeModal">取消</el-button>
        <el-button type="success" @click="saveSource">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {saveSourceType,modifySourceType, getSourceTypes, deleteSourceType } from '@/api/publish'
import Upload from '@/components/Upload/upload.vue'
export default {
  name: 'material',
  data () {
    return {
      souceChange: false, // 是否上传过图片导致图片数据变化 此状态用来控制是否在关闭后要进行重新加载
      showSourceDialog: false,
      sourceData: [],// 存储图片的数据 同时作为收藏数据和全部数据的引用
      resourceType:{
          id:'',
          typeName:'',
          description:'',
          image:'',
          tags:'',
          language:'',
          sort:0
      }
    }
  },
  components: {
    Upload
  },
  mounted () {
    //加载所有图片
    this.sourceTypes()
  },
  methods: {
    // 页面发生变化
    pageChange (newPage) {
      this.page.currentPage = newPage
      this.loadData()
    },
    sizeChange(val){
      this.page.pageSize=val
      this.loadData()
    },
    // 获取分类列表
    async sourceTypes () {
      const result = await getSourceTypes()
      this.sourceData = result.data
    },

    modifySource(source){
        this.resourceType = JSON.parse(JSON.stringify(source))
        this.showSourceDialog = true
        //设置默认图片
        this.$nextTick(() => {
            console.log(this.$refs.upimage)
            this.$refs['upimage'].setDefaultImage(this.resourceType.image);
        })
    },

    // 删除分类
    async delSource (source) {
      let result = await this.$confirm('确认删除该分类?')
      if (result) {
        result = await deleteSourceType(source.id)// 删除数据
        if (result.code === 20000) {
          // 写多了if  else 写个三元表达式 换换口味
          this.$message({ type: 'success', message: '删除成功' })
          this.sourceTypes()
        } else {
          this.$message({ type: 'error', message: result.message })
        }
      }
    },
    changeCall (url) {
      // 图片变化了 记录改变的状态 用于关闭弹层时 重新加载数据
      this.souceChange = true,
      this.resourceType.image=url
    },
    // 关闭弹层时触发
    // 注意 这里 为什么不在click用表达式赋值的方式去关掉弹层呢
    // 因为发现在click="dialog = false" 模式下 不能触发关闭的回调 应该是实现机制的顺序问题
    closeModal () {
      if (this.sourceChange) {
        this.sourceTypes()
        this.souceChange = false
      }
      this.showSourceDialog = false
    },
    //保存分类 saveSourceType
    async saveSource(){
        //modifySourceType
      let result = null
      if(this.resourceType.id!=''){
          result = await modifySourceType(this.resourceType)
      }else{
          result = await saveSourceType(this.resourceType)
      }
      if (result.code === 20000) {
          this.$message({ type: 'success', message: '操作成功' })
          this.showSourceDialog = false;
          //列表加载
          this.sourceTypes()
        } else {
          this.$message({ type: 'error', message: result.message })
        }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/scss/element-variables.scss';

.filter {
  height: 96px;
}

.el-switch {
  height: auto;
}

.el-switch__label {
  position: absolute;
  color: $--color-text-secondary;
}

.el-switch__label.is-active {
  color: $--color-text-primary;
  font-weight: 600;
}

.el-switch__label--left {
  left: 0;
  margin-left: 22px;
  z-index: 9999;
}

.el-switch__label--right {
  right: 0;
  margin-right: 23px;
}

.el-switch__core {
  height: 40px;
  border-radius: 4px;
}

.el-switch__core:after {
  width: 63px;
  height: 32px;
  top: 3px;
  left: 3px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.el-switch.is-checked .el-switch__core::after {
  margin-left: 65px;
  left: 3px;
}

.total {
  margin-right: 16px;
  color: $--color-text-secondary;
}

.content-card {
  display: flex;
  padding-left: 6px;
  padding-bottom: 30px;
  flex-wrap: wrap;

  .el-card {
    position: relative;
    width: 300px;
    height: 350px;
    margin-top: 30px;
    margin-left: 24px;
    border-radius: 8px;
    border: 1px solid $--background-color-base;

    .image {
      display: block;
      width: 100%;
      //height: 124px;
      object-fit: cover;
    }

    .collection {
      height: 183px;
    }

    .operate {
      display: flex;
      height: 57px;
      justify-content: space-around;
      align-items: center;

      .item {
        display: flex;
        align-items: center;
        font-size: 12px;
        cursor: pointer;

        .icon {
          width: 30px;
          height: 30px;
        }
      }
    }
  }

  .el-card.is-always-shadow,
  .el-card.is-hover-shadow:focus,
  .el-card.is-hover-shadow:hover {
    -webkit-box-shadow: 0px 2px 8px 4px rgba(51, 53, 58, 0.07);
    box-shadow: 0px 2px 8px 4px rgba(51, 53, 58, 0.07);
  }
}

.el-pagination {
  border-top: 2px solid #EBEEF5;
}

.el-dialog__footer {
  border-top: 2px solid #EBEEF5;
}
.pointicon{
  cursor: pointer;
}

.sourcebox{
    padding-left: 15px;
    padding-right: 15px;
    height: 120px;
    overflow: hidden;
}

.sourcehandlerbox{
    text-align: center;
    padding-top: 10px;
}
</style>
